<script setup>
import { ref, watch } from 'vue'
const { open, dialogRadius, dialogWidth, closePosition, closeImg, headerBackground, dialogPosition, dialogClose } = defineProps({
	open: Boolean,
	header: Boolean,
	footer: Boolean,
	dialogRadius: Boolean,
	dialogWidth: Boolean,
	catalogTitle:Boolean,
	dialogGradeType:Boolean,
	closePosition: {
		type: String,
		validator(value) {
			return ["left", "right", "top", "bottom"].includes(value) || !value;
		},
	},
	closeImg: String,
	headerBackground: String,
	dialogPosition: {
		type: String,
		validator(value) {
			return ["left", "right"].includes(value) || !value;
		},
	},
	dialogClose: {
		type: Boolean,
		default: false
	}
});

const isClose = ref(false);
const animationPlaying = ref(false); // 过渡动画播放中

const emit = defineEmits(["close"]);
const close = () => {
	isClose.value = true;
	if (dialogPosition !== 'left') {
		emit("close");
	}
}

const containerClose = () => {
	if (dialogClose) {
		close();
	}
}

watch( () => open, (val) => {
	isClose.value = !val;
})

const handleAnimationend = () => {
	if (isClose.value) {
		emit("close");
	}
}

</script>
<template>
	<Teleport v-if="open" to="body">
		<div class="container" @click="containerClose" :class="{ fadeIn: dialogPosition === 'left' && open, fadeOut: dialogPosition === 'left' && isClose }">
				<dialog :class="{ sidebar: dialogPosition, sliderIn: dialogPosition === 'left' && open,  sliderOut: dialogPosition === 'left' && isClose }" :open="open" @animationend.self="handleAnimationend">
						<header v-show="header">
							<img v-show="closePosition" :src="closeImg" alt="" @click="close" />
							<span>
								<slot name="title"></slot>
							</span>
						</header>
						<main :class="{ sidebar: dialogPosition }">
							<slot name="content"></slot>
						</main>
						<footer v-show="footer">
							<slot name="button"></slot>
						</footer>
				</dialog>
			<slot></slot>
		</div>
	</Teleport>
</template>
<style scoped>
.container {
	background-color: rgba(0, 0, 0, 0.5);
	/* height: calc(100vh + 1rem); */
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	font-family:text-cn,serif;
	z-index:9999;
}

.container.fadeIn {
	animation: fadein .35s linear;
	-webkit-animation: fadein .35s linear;
}

@keyframes fadein {
  from {
	background-color: rgba(0, 0, 0, 0);
  }
  to {
	background-color: rgba(0, 0, 0, 0.5);
  }
}

@-webkit-keyframes fadein {
	from {
		background-color: rgba(0, 0, 0, 0);
	}
	to {
		background-color: rgba(0, 0, 0, 0.5);
	}
}

.container.fadeOut {
	animation: fadeout .35s linear;
	-webkit-animation: fadeout .35s linear;
}

@keyframes fadeout {
  from {
    /* opacity: 1; */
	background-color: rgba(0, 0, 0, 0.5);
  }
  to {
	/* opacity: 0; */
	background-color: rgba(0, 0, 0, 0);
  }
}

@-webkit-keyframes fadeout {
	from {
		background-color: rgba(0, 0, 0, 0.5);
	}
	to {
		background-color: rgba(0, 0, 0, 0);
	}
}

dialog {
	border: none;
	border-radius: v-bind("dialogRadius?'1rem':'0'");
	left: 50%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	translate: -50% -50%;
	width: v-bind("dialogWidth?'39%':'53%'");
}

dialog.sidebar {
	height: 100%;
	left: v-bind("dialogPosition === 'left'?0:'unset'");
	right: v-bind("dialogPosition === 'right'?0:'unset'");
	top: unset;
	translate: none;
	width:v-bind("dialogGradeType?'45%':'27%'");
}

dialog.sliderIn {
	animation: slidein .35s linear;
	-webkit-animation: slidein .35s linear;
}

@keyframes slidein {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@-webkit-keyframes slidein {
	from {
		-webkit-transform: translateX(-100%);
	}
	to {
		-webkit-transform: translateX(0);
	}
}

dialog.sliderOut {
	animation: slideout .35s linear;
	-webkit-animation: slideout .35s linear;
}

@keyframes slideout {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@-webkit-keyframes slideout {
	from {
		-webkit-transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(-100%);
	}
}

main.sidebar {
	height:v-bind("footer?'85%':'100%'");
	overflow: auto;
}
main{
	width:unset;
	height:unset;
	display:block;
}
dialog:focus-visible {
	outline: none;
}
header {
	align-items: center;
	background: v-bind(headerBackground);
	background-size: cover;
	color:v-bind("catalogTitle?'#333333':'orange'");
	font-weight:v-bind("catalogTitle?'bold':''");
	display: flex;
	height: 3rem;
	justify-content: center;
	width: 100%;
	font-size:0.9rem;
}
header img {
	bottom: v-bind("closePosition === 'bottom'?'-500%':'unset'");
	cursor: pointer;
	height: 1.6rem;
	left: v-bind("closePosition === 'left'?'3%':'unset'");
	position: absolute;
	right: v-bind("closePosition === 'right'?'3%':'unset'");
	top: v-bind("closePosition === 'top'?'-100%':'unset'");
}
footer {
	display: flex;
	justify-content: space-around;
	padding-bottom: 5%;
	height:unset;
}
footer :slotted(button) {
	background: transparent;
	border: none;
	border-radius: 1rem;
	color: white;
	font-size: xx-large;
	padding: 1rem 5rem;
}
:slotted(button) {
	background-color: transparent;
}
::-webkit-scrollbar{
	width:0.4rem;
	height:0.4rem;
}
::-webkit-scrollbar-thumb{
	background-color:#00b1a5;
	border-radius:0.4rem;
}
::-webkit-scrollbar-track{
	background-color:#eee;
	border-radius:0.4rem;
}
@media screen and (min-width: 5000px) {
	footer :slotted(button) {
		font-size: xxx-large;
	}
}
@media screen and (min-width: 1900px) {
	dialog{
		width:v-bind("dialogWidth?'39%':'45%'");
	}
}
@media screen and (max-width:1500px){
	dialog{
		width:v-bind("dialogWidth?'45%':'50%'");
	}
}

</style>
